<template>
  <el-tabs :tab-position="tabPosition">
    <el-tab-pane v-for="(item, index) in info" :key="index" :label="item.label">
      <div class="row row-cols-1 row-cols-lg-2">
        <div
          class="col my-2"
          v-for="(items, indexs) in item.imgSrc"
          :key="indexs"
        >
          <div
            class="position-relative"
            style="overflow: hidden; width:100%;height:450px; "
          >
            <img :src="items.img" alt="" />
            <div class="desc">{{ items.title }}</div>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      tabPosition: "top",
      info: [
        {
          label: "政治",
          imgSrc: [
            {
              title: "【港澳回归，一雪百年耻辱】",
              img:
                "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3641077723,242236894&fm=26&gp=0.jpg",
            },
            {
              title: "【联合国常任理事国，一票否决】",
              img:
                " https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3121882338,1082573782&fm=11&gp=0.jpg",
            },
          ],
        },
        {
          label: "经济",
          imgSrc: [
            {
              title: "【南水北调,史无前例。】",
              img:
                "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2003039755,1188872001&fm=26&gp=0.jpg",
            },
            {
              title: "【西藏天路，世界屋脊上的巨龙】",
              img:
                " https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=629609649,1778549250&fm=26&gp=0.jpg",
            },
          ],
        },
        {
          label: "体育",
          imgSrc: [
            {
              title: "【北京奥运，世界最好的奥运会，可以说前无古人后无来者】",
              img:
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3400939700,387688087&fm=26&gp=0.jpg",
            },
            {
              title: "【2022冬奥会】",
              img:
                " https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2265726610,2093714761&fm=26&gp=0.jpg",
            },
          ],
        },
        {
          label: "科技",
          imgSrc: [
            {
              title: "【中国天眼，世界最大的望眼镜】",
              img:
                "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3196902390,429710952&fm=26&gp=0.jpg",
            },
            {
              title: "【北斗卫星 自己的GPS 定位系统】",
              img:
                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2765288525,2416410330&fm=26&gp=0.jpg",
            },
          ],
        },
        {
          label: "军事",
          imgSrc: [
            {
              title: "【辽宁航母，大国霸权】",
              img:
                "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1006724198,3824635094&fm=26&gp=0.jpg",
            },
            {
              title: "中国军队",
              img:
                "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1233712604,1564688829&fm=26&gp=0.jpg",
            },
          ],
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.desc {
  margin-top: 30px;
  height: 70px;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 0 0 20px 20px;
  z-index: 3;
}
img:hover ~ .desc {
  top: 86%;
}
@media (max-width: 768px) {
  img:hover ~ .desc {
    top: 75%;
  }
}
</style>
